<template>
    <div class="icons">
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p>热门景点</p>
            </div>
        </div>
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="http://source.qunarzz.com/mobile_platform/mobile_douxing/localman/pc/ddrv2/menpiao_224.jpg"/>
                <p class="icon-desc">热门景点</p>
            </div>
        </div>
    </div>
</template>
<script>
   export default {
        name:'HomeIcons'
   }
</script>
<style lang="stylus" scoped>
    .icons
        overflow: hidden
        height: 0
        padding-bottom: 50%
        .icon
            position: relative
            margin-left: 0.5%
            width: 24.5%
            padding-bottom: 24.5%
            text-align: center
            float: left
            .icon-img
                position: absolute
                top: 0
                left: 0
                right: 0
                .icon-img-content
                    width: 100%
                .icon-desc
                    text-align: center
</style>